<template>
	<view>
		<!-- #ifdef H5 -->
		<view v-if="!this.$wechat.isWeixin()">
			<view class="text-section">
				<view>{{ content }}</view>
			</view>
			<view v-html="formContent"></view>
		</view>
		<!-- #endif -->
		<view v-if="this.$wechat.isWeixin()">
			<view class="text-section">
				<view>点击复制网址去浏览器中打开</view>
				<view class="link">{{ link }}</view>
			</view>
			<view class="button-section">
				<!-- #ifdef H5 -->
				<button class="button copy" :data-clipboard-text="link">点击复制</button>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<button class="button copy" @click="copyLink">点击复制</button>
				<!-- #endif -->
				<button class="button off" @click="goDetail">完成支付</button>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<view v-show="hintShow" class="hint" @click="hintShow = false">
			<view>
				点击右上角
				<text class="iconfont icon-xiangyou"></text>
			</view>
			<view>选择 在浏览器 打开，去支付宝支付</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
// #ifdef H5
import ClipboardJS from '@/plugin/clipboard/clipboard.js';
import { mapGetters } from 'vuex';
import { toLogin } from '@/libs/login.js';
import { orderPay } from '@/api/order.js';
import { alipayFull } from '@/api/user.js';
export default {
	data() {
		return {
			// #ifdef H5
			isWeixin: this.$wechat.isWeixin(),
			hintShow: true,
			// #endif
			orderId: '',
			link: '',
			pay_key: '',
			content: '正在支付中',
			formContent: ''
		};
	},
	computed: mapGetters(['isLogin']),
	onLoad(option) {
		if (!this.isLogin && this.$wechat.isWeixin()) {
			toLogin();
		}
		this.orderId = option.id;
		let rechar_id = option.id;
		let type = option.type;
		let price = option.price;
		if (!this.$wechat.isWeixin()) {
			if (type === 'order') {
				this.link = location.protocol + '//' + window.location.host + '/pages/goods/alipay_invoke/index?orderNo=' + this.orderId + '&type=order';
				if (!this.orderId) {
					this.content = '支付订单不存在，页面将在2秒后自动关闭！';
					uni.showToast({
						title: '支付订单不存在,页面将在2秒后自动关闭',
						icon: 'none'
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						});
					}, 2000);
				}
				uni.showLoading({
					title: '正在支付中'
				});
				orderPay({
					orderNo: this.orderId,
					payChannel: 'alipay',
					payType: 'alipay'
				})
					.then((res) => {
						uni.hideLoading();
						that.$nextTick(() => {
							document.forms['punchout_form'].submit();
						});
					})
					.catch((err) => {
						uni.hideLoading();
						uni.showToast({
							title: err,
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							});
						}, 2000);
					});
			} else {
				this.link = location.protocol + '//' + window.location.host + `/pages/goods/alipay_invoke/index?price=${price}&rechar_id=${rechar_id}&type=users`;
				alipayFull({
					from: 'alipay',
					price: price,
					payType: 'alipay',
					rechar_id: rechar_id
				})
					.then((res) => {
						//h5支付
						uni.hideLoading();
						that.$nextTick(() => {
							document.forms['punchout_form'].submit();
						});
					})
					.catch((res) => {
						uni.hideLoading();
						return that.$util.Tips({
							title: res
						});
					});
			}
		}
	},
	onReady() {
		this.$nextTick(() => {
			// #ifdef H5
			const clipboard = new ClipboardJS('.copy');
			clipboard.on('success', () => {
				uni.showToast({
					title: '复制成功'
				});
			});
			// #endif
		});
	},
	methods: {
		// #ifdef MP
		copyLink() {
			uni.setClipboardData({
				data: this.link,
				success() {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				},
				fail() {
					uni.showToast({
						title: '复制失败',
						icon: 'none'
					});
				}
			});
		},
		// #endif
		goDetail() {
			if (this.orderId) {
				uni.navigateTo({
					url: `/pages/goods/order_details/index?order_id=${this.orderId}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/users/user_money/index`
				});
			}
		}
	}
};
//#endif
</script>

<style>
page {
	background-color: #ffffff;
}
</style>

<style lang="scss" scoped>
.alipaysubmit {
	display: none;
}

.text-section {
	padding-top: 148rpx;
	margin-top: 185rpx;
	background: url('')
		center top/280rpx 98rpx no-repeat;
	font-weight: bold;
	font-size: 32rpx;
	text-align: center;
	color: #111111;

	.link {
		margin-top: 16rpx;
		margin-right: 98rpx;
		margin-left: 98rpx;
		white-space: pre-wrap;
		overflow-wrap: break-word;
		font-weight: normal;
		color: #666666;
	}
}

.button-section {
	margin-top: 95rpx;
	margin-right: 98rpx;
	margin-left: 98rpx;

	.button {
		height: 80rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
		line-height: 80rpx;

		~ .button {
			margin-top: 32rpx;
		}

		&.copy {
			background-color: #333333;
			color: #ffffff;
		}

		&.off {
			border: 2rpx solid #999999;
			color: #666666;
		}
	}
}

.hint {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding-top: 156rpx;
	padding-left: 144rpx;
	background: url('')
		calc(100% - 32rpx) 12rpx/229rpx 178rpx no-repeat;
	font-weight: 500;
	font-size: 30rpx;
	line-height: 68rpx;
	color: #c1c1c1;
	background-color: rgba(0, 0, 0, 0.8);

	.iconfont {
		margin-left: 10rpx;
		font-weight: bold;
		font-size: 30rpx;
	}
}
</style>
